<template>
    <view style="position: sticky;
    background-color: #F5F9FA;
    top: 90px;
    z-index: 1;height: 68px;">
        <view class="container" :style="{ height: `${tabHeight}px` }">
            <view class="tab-container">
                <view v-for="(item, index) in tabList" :class="['tab-wrap tab-in-active', { 'tab-active': currentTabIndex === index }]" @click="changeTab(index)" :key="index">
                    {{ item.name }}
                </view>
            </view>

        </view>
    </view>
</template>
<script>
export default {
    name: 'BhTabbar',
    emits: ['changeTab'],
    props: {
        tabList: {
            type: Array,
            default: []
        },
        currentTabIndex: {
            type: Number,
            default: 0
        },
        tabHeight: {
            type: Number,
            default: 50
        }
    },
    methods: {
        changeTab(tabIndex) {
            this.$emit('changeTab', tabIndex)
        }
    }
}
</script>
<style>
.container {
    /* position: sticky;
    top: 106px;
    z-index: 1; */
}

.tab-container {
    display: flex;
    justify-content: flex-start;
    position: sticky;
    margin-left: 32rpx;
    margin-right: 32rpx;
    /* margin-top: 32rpx; */
    /* margin-bottom: 32rpx; */
    border-radius: 16rpx;
    background: #ECF0F1;
}

.tab-wrap {
    width: 100%;
    font-family: 苹方-简;
    font-size: 36rpx;
    font-weight: 500;
    text-align: center;
    padding: 16rpx 0rpx 24rpx 0rpx;

}

.tab-in-active {
    margin-top: 4rpx;
    margin-bottom: 4rpx;
    margin-left: 4rpx;
    border-radius: 16rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
}

.tab-active {
    height: calc(100% - 20rpx);
    margin: 4rpx;
    border-radius: 16rpx;
    background: #FFFFFF;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
}
</style>